<template>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
        <div>{{ getCount }}</div>
        <FormItem label="任务名称" prop="project_name ">
            <Input v-model="formValidate.name " placeholder=" "></Input>
        </FormItem>
        <FormItem label="SQL" prop="task_sql ">
            <Input v-model="formValidate.task_sql " placeholder="请确保SQL可执行 "></Input>
        </FormItem>
        <FormItem label="发送人手机" prop="receiver_phone">
            <Input v-model="formValidate.receiver_phone " placeholder="发送人手机 "></Input>
        </FormItem>
        <FormItem label="分钟 " prop="minute ">
            <Input v-model="formValidate.minute " placeholder=" "></Input>
        </FormItem>
        <FormItem label="小时 " prop="hour ">
            <Input v-model="formValidate.hour " placeholder=" "></Input>
        </FormItem>
        <FormItem label="每周第几天 " prop="day_of_week ">
            <Input v-model="formValidate.day_of_week " placeholder=" "></Input>
        </FormItem>
        <FormItem label="每月第几天 " prop="day_of_month ">
            <Input v-model="formValidate.day_of_month " placeholder=" "></Input>
        </FormItem>
        <FormItem label="月份 " prop="month ">
            <Input v-model="formValidate.month " placeholder=" "></Input>
        </FormItem>
        <FormItem label="任务描述" prop="desc">
            <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="任务描述"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary " @click="handleSubmit( 'formValidate') ">提交</Button>
            <Button @click="handleReset( 'formValidate') " style="margin-left: 8px ">重置</Button>
            <Button type="primary " @click="change">提交</Button>
        </FormItem>
    </Form>
</template>
<script>
    import { mapGetters,mapActions,mapMutations} from 'vuex'
    export default {
        data() {
            const validateCrontab = (rule, value, callback) => {
                console.log(rule, value, callback)
                if (value === '') {
                    callback(new Error('不能为空'));
                } else {
                    // if (this.formCustom.passwdCheck !== '') {
                    //     // 对第二个密码框单独验证
                    //     this.$refs.formCustom.validateField('passwdCheck');
                    // }
                    // callback();
                }
            };
            return {
                formValidate: {
                    name: '1',
                    task_sql: '1',
                    receiver_phone: '15122558899',
                    minute: '1',
                    hour: '1',
                    day_of_week: '1',
                    day_of_month: '1',
                    month: '1',
                    desc: 'efefefe'
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ],
                    task_sql: [
                        { required: true, message: '不能为空', trigger: 'blur' },
                        { type: 'string', max: 200, message: '不能多于200个字符', trigger: 'blur' }
                    ],
                    receiver_phone: [
                        { required: true, message: '不能为空', trigger: 'blur' },
                        { type: 'string', max: 11,min:11, message: '请正确填写手机号', trigger: 'blur' }
                    ],
                    minute: [
                        { required: true, message: '不能为空', trigger: 'blur' },
                        { validator: validateCrontab, trigger: 'blur' }
                    ],
                    hour: [
                        { required: true, message: '不能为空', trigger: 'blur' },
                        { validator: validateCrontab, trigger: 'blur' }
                    ],
                    day_of_week: [
                        { required: true, message: '不能为空', trigger: 'blur' },
                        { validator: validateCrontab, trigger: 'blur' }
                    ],
                    day_of_month: [
                        { required: true, message: '不能为空', trigger: 'blur' },
                        { validator: validateCrontab, trigger: 'blur' }
                    ],
                    month: [
                        { required: true, message: '不能为空', trigger: 'blur' },
                        { validator: validateCrontab, trigger: 'blur' }
                    ],
                }
            }
        },
        methods: {
            ...mapActions('task',['saveTask']),
            change(){
                this.saveTask(this.formValidate)
                //this.$store.state.task.count++
            },

            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (!valid) {
                        this.$Message.error('Fail!');
                    }
                    this.$Message.success('Success!');
                })
                let url = "http://www.baidu.com"
                this.$axios({
                    method:'post',
                    url:url,
                    data:this.formValidate
                }).then(res => {
                    console.log(res)
                }).catch(error => {
                    console.log(err)
                })
            },
            handleReset(name) {
                this.$refs[name].resetFields();
            }
        },
        computed:{
            getCount(){
                return this.$store.state.task.count
            }
        }
    }
</script>
